<template>
	<view>
		<image @click="$helper.back(1)" class="back-img" src="/static/image/back.png" mode=""></image>
		<image @click="showMore" class="more-img" src="/static/image/more.png" mode=""></image>
		<view class="video-box">
			<swiper v-if="listInfo.type == 'image'" class="screen-swiper"  :indicator-dots="true" :circular="true"
				:autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in listInfo.url.split(',')" :key="index">
					<image :src="item" mode=""></image>
					<image src="/static/image/Index/2.png" mode=""></image>
				</swiper-item>
			</swiper>
			<view v-if="listInfo.type == 'video'" class="video-container" @click="togglePlay">
				<video :autoplay="false" ref="myVideo" class="videoss" id="myVideo" :src="listInfo.url" @error="videoErrorCallback"
					@play="onPlay" @pause="onPause" @click.stop></video>
				<view class="custom-control">
					<image v-if="isPlaying" src="/static/image/find/playVideo.png" class="control-icon" @click.stop="togglePlay" />
					<image v-else src="/static/image/find/stop.png" class="control-icon" @click.stop="togglePlay" />
				</view>
			</view>
			<view class="imgs">
				<view class="right_fix flex">
					<view class="down-img">
						<image class="header_img" :src="listInfo.user.avatar" mode=""></image>
						<image v-show="listInfo.attention == false" class="add_img" @click="gzUser(listInfo.user.id)" src="/static/image/find/add.png" mode=""></image>
					</view>
					<view class="down-img">
						<!-- <image class="love-img" src="/static/image/find/love_active.png" mode=""></image> -->
						<image @click="linkBtn" :src="listInfo.is_like == false ? '/static/image/find/love.png' : '/static/image/find/love_active.png'" mode=""></image>
						<view>{{listInfo.like}}</view>
					</view>
					<view class="down-img">
						<image @click="lookmore" src="/static/image/find/commit.png" mode=""></image>
						<view>{{listInfo.comment_count}}</view>
					</view>
					<view class="down-img" @click="dsGift">
						<image src="/static/image/find/gift.png" mode=""></image>
						<view>{{listInfo.user.gift_num}}</view>
					</view>
				</view>
			</view>
			<view class="shop-detail flex justify-around" v-if="listInfo.goods">
				<view class="flex">
					<image :src="listInfo.goods.cover" mode=""></image>
					<view class="shop-detail-middle">
						<view style="color: #000000;font-size: 36rpx;">{{listInfo.goods.name}}</view>
						<view style="color: #f00;font-size: 28rpx;margin-top: 15rpx;">￥{{listInfo.goods.price}}/人均</view>
					</view>
				</view>
				<view class="shop-detail-btn">
					立即下单
				</view>
			</view>
			<view class="content_model">
				<view class="model_info">
					<view class="info_name">{{listInfo.user.user_nickname}}</view>
					<view class="info_group">
						<image :src="listInfo.user.gender == '2' ? '/static/image/Index/girl-icon.png':'/static/image/Index/boy-icon.png'" mode="" class="genderimg"></image>
						<view class="agetext">{{listInfo.user.age}} <text v-show="listInfo.user.horoscope">{{listInfo.user.horoscope}}</text> </view>
					</view>
					<image v-show="listInfo.user.is_vip == true" src="/static/image/Index/VIP-icon.png" mode="" class="vipimg"></image>
					<!-- <view class="f-time">3天前发布</view> -->
				</view>
				<view class="model_bz">
					{{listInfo.title}}
				</view>
			</view>
		</view>
		<uni-popup class="select_popup" ref="selectPopup" :mask-click="true" type="center">
			<view class="selectPopup">
				<view class="selectPopup-box">
					<view class="select_popup_title">
						提示
					</view>
					<view class="select_popup_content">
						此功能仅对会员用户开放，是否确认
						去开通会员？
					</view>
				</view>
				<view class="select_btn">
					<text @click="$refs.selectPopup.close()">取消</text>
					<text class="on" @click="getChoose">确定</text>
				</view>
			</view>
		</uni-popup>
		<!-- 评论回复弹窗 -->
		<replyComp ref="replyPop"></replyComp>
		<!-- 打赏弹窗 -->
		<daShangComp ref="dashangPop" :articleId="articleId" :typeList="lwList" :listInfo='listInfo'></daShangComp>

	</view>
</template>

<script>
	import uniPopup from "@/components/uniapp-components/uni-popup/uni-popup.vue"
	// 评论回复弹窗
	import replyComp from '@/components/nvue-comp/reply-comp.nvue';
	// 打赏弹窗
	import daShangComp from '@/components/nvue-comp/dashang.nvue';

	export default {
		components: {
			uniPopup,
			replyComp,
			daShangComp
		},
		data() {
			return {
				listInfo:{},//数据列表
				isPlaying: false,
				lwList: [], //打赏礼物列表
				articleId: '11', // 被打赏人id
				id:'',// 详情id,
				dtType:'',//动态类型
				videoUrl: 'https://k0ub7yccy3ey24z.djvod.ndcimgs.com/bs2/photo-video-mz/5248101101656194408_9ecf1f6afa303889_9526_hd15.mp4?tag=1-1753277891-unknown-0-rjdzm268bm-e0dd40aad8351c7f&provider=self&clientCacheKey=3xryjz9irwzxjku_342d81fa&di=df5ad702&bp=14944&x-ks-ptid=162785259466&kwai-not-alloc=self-cdn&kcdntag=p:Henan;i:ChinaMobile;ft:UNKNOWN;h:COLD;pn:kuaishouVideoProjection&ocid=100000737&tt=hd15&ss=vpm'
			}
		},
		onLoad(options) {
			this.id =options.id;
			this.dtType = options.type
			this.getDetail()
			this.getLwList()
		},
		methods: {
			// 礼物列表
			getLwList(){
				this.$http.lw().then(res => {
					if (res.code == '1') {
						this.lwList = res.data
					}
				})
			},
			//点赞
			linkBtn(){
				let params = {
					// dynamic 动态点赞space_dynamic 空间动态点赞 comment = 动态评论点赞
					type:'dynamic',
					class_id:this.listInfo.id
				}
				if(this.listInfo.is_like == false){
					this.$http.dz(params).then(res => {
						if (res.code == '1') {
							this.getDetail()
						}
					})
				}else{
					this.$http.cancleDz(params).then(res => {
						if (res.code == '1') {
							this.getDetail()
						}
					})
				}
			},
			// 关注
			gzUser(id){
				this.$http.gz({
					id: id
				}).then(res => {
					if (res.code == '1') {
						 this.getDetail()
					}
				})
			},
			// 获取详情数据
			getDetail(){
				this.$http.getListDetail({
					id: this.id
				}).then(res => {
					if (res.code == '1') {
						this.listInfo = res.data;
					}
				})
			},
			// 打赏按钮
			dsGift() {
				this.$refs.dashangPop.open();
			},
			// 打开查看更多评论弹窗
			lookmore() {
				this.$refs.replyPop.open();
				uni.$emit('id', this.listInfo.id);
			},
			togglePlay(e) {
				// const video = this.$refs.myVideo;
				 const video = uni.createVideoContext('myVideo', this);
				if (this.isPlaying) {
					 video.pause(); // 暂停视频
					} else {
						video.play(); // 播放视频
				 }
				this.isPlaying = !this.isPlaying; // 切换播放状态
			},
			onPlay() {
				this.isPlaying = true;
			},
			onPause() {
				this.isPlaying = false;
			},
			// 播放失败
			videoErrorCallback() {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '视频拉取失败，请稍后再试！'
				});
				// this.$helper.toast('播放失败');
			},
			//筛选 确定
			getChoose() {
				this.$refs.selectPopup.cancle();
			},
			// 打开举报弹窗
			showMore() {
				this.$refs.selectPopup.open();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.back-img {
		width: 18rpx;
		height: 32rpx;
		position: absolute;
		top: 50rpx;
		left: 38rpx;
		z-index: 999;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.screen-swiper {
		width: 100%;
		height: 100vh;
		margin-left: 50%;
		transform: translateX(-50%);
		image {
			width: 100%;
			height: 100%;
			margin-right: 20rpx;
		}
	}
	.more-img {
		width: 46rpx;
		height: 10rpx;
		position: absolute;
		top: 50rpx;
		right: 38rpx;
		z-index: 999;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// 视频
	.video-box {
		flex-direction: row;
		width: 750rpx;
		height: 100vh;
		position: relative;
	}
	.video-container {
	  position: relative;
	  display: inline-block;
	  cursor: pointer;
	}
	
	.videoss {
	  display: block;
	  width: 100%;
	}
	
	.custom-control {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  pointer-events: none; /* 允许点击穿透到视频 */
	}
	
	.control-icon {
	  width: 120rpx;
	  height: 120rpx;
	  pointer-events: auto; /* 允许图标接收点击事件 */
	  opacity: 0.8;
	  transition: opacity 0.3s;
	}
	
	.control-icon:hover {
	  opacity: 1;
	}
	
	/* 隐藏原生控件 */
	.videoss::-webkit-media-controls {
	  display: none !important;
	}
	.videoss {
		width: 750rpx;
		height: 100vh !important;
		// z-index: 10;
		border-radius: 16rpx;
	}

	.uni-video-cover {
		background-color: none;
	}

	.uni-video-container {
		background-color: none;
	}

	.imgs {
		position: absolute;
		z-index: 999;

		image {
			width: 100%;
			height: 100%;
		}

		.right_fix {
			width: 120rpx;
			padding-top: 25rpx;
			position: fixed;
			right: 10rpx;
			top: 28%;
			flex-direction: column;
			align-items: center;
			font-size: 28rpx;
			color: #fff;
			font-weight: 400;
			text-align: center;
		}

		.down-img {
			width: 108rpx;
			height: 100rpx;
			z-index: 99;
			margin-bottom: 40rpx;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 16rpx;
			}

			.header_img {
				width: 94rpx !important;
				height: 94rpx;
				border-radius: 50%;
			}

			.add_img {
				width: 40rpx !important;
				height: 40rpx !important;
				border-radius: 50%;
				top: -34rpx;
			}
		}
	}
	.shop-detail{
		width: 530rpx;
		height: 168rpx;
		background: #FFFFFF;
		border-radius: 0rpx;
		opacity: 0.8;
		position: fixed;
		z-index: 999;
		bottom: 170rpx;
		margin-left: 20rpx;
		border-radius: 5rpx;
		align-items: center;
		image{
			width: 120rpx;
			height: 120rpx;
		}
		.shop-detail-middle{
			margin-left: 10rpx;
		}
		.shop-detail-btn{
			width: 136rpx;
			height: 46rpx;
			background: #000000;
			border-radius: 30rpx;
			font-weight: 400;
			font-size: 22rpx;
			color: #FEC92F;
			line-height: 46rpx;
			text-align: center;
		}
	}
	.content_model {
		width: 95%;
		left: 50%;
		transform: translate(-50%);
		position: fixed;
		z-index: 999;
		bottom: 60rpx;
	}

	.model_bz {
		font-size: 24rpx;
		color: #FFFFFF;
		// white-space: nowrap;
		// overflow: hidden;
		// text-overflow: ellipsis;
	}

	.model_info {
		display: flex;
		align-items: center;
		font-weight: 500;
		margin-bottom: 10rpx;
	}

	.info_name {
		font-size: 32rpx;
		text-align: center;
		color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.info_group {
		display: flex;
		align-items: center;
		// width: 142rpx;
		// height: 32rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-left: 12rpx;
		padding: 4rpx 10rpx;
		.genderimg {
			width: 17rpx;
			height: 17rpx;
		}

		.agetext {
			font-size: 20rpx;
			color: rgba(255, 255, 255, 0.8);
			line-height: 28rpx;
			margin-left: 8rpx;
		}

	}

	.vipimg {
		width: 54rpx;
		height: 28rpx;
		margin-left: 16rpx;
	}

	.f-time {
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
		margin-left: 16rpx;
	}

	.select_popup {
		z-index: 9999;
		width: 100%;
		height: 300rpx;
		border-radius: 30rpx;

		.selectPopup {
			background-color: #fff;

			.selectPopup-box {
				padding: 29upx 27upx 39upx;
			}

			.select_popup_title {
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				text-align: center;
			}

			.select_popup_content {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 39rpx;
				text-align: center;
				margin: 30rpx 0;
			}

			.select_btn {
				width: 100%;
				height: 80upx;
				border: 1upx solid #EFEFEF;
				display: flex;
				overflow: hidden;
				cursor: pointer;

				text {
					display: block;
					cursor: pointer;
					width: 50%;
					height: 100%;
					font-size: 30upx;
					color: #999999;
					line-height: 80upx;
					text-align: center;
				}

				text.on {
					color: #000000;
				}
			}
		}
	}
</style>